<%@page import="com.iwords.service.object.SysLibEntity"%>
<%@page import="java.net.URLEncoder"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8"%>
<%@page import="com.iwords.service.object.SysLibWordsEntity"%>
<%@page import="java.util.*"%>

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>5iwords</title>
        <link rel="stylesheet" href="css/reset.css" />
        <link rel="stylesheet" href="css/layout.css" />

        <link rel="stylesheet" href="css/pagination.css" />
        <link rel="stylesheet" href="css/style.css" />

        <script src="js/jquery-1.6.2.min.js"  type="text/javascript"></script>

        <script type="text/javascript">

            function directFamiliarity(libid,f){
                window.location.href="learningStatus?action=study&libid="+libid+"&familiarity="+f   ;

            }
            
            
            function isIE()
            { //ie?

                if (window.navigator.userAgent.toLowerCase().indexOf("msie") >= 1)
                    return true;
                else
                    return false;
            }

            if (!isIE())
            { //firefox innerText define

                HTMLElement.prototype.__defineGetter__("innerText",
                function ()
                {
                    var anyString = "";
                    var childS = this.childNodes;
                    for (var i = 0; i < childS.length; i++)
                    {
                        if (childS[i].nodeType == 1)
                            anyString += childS[i].tagName == "BR"
                            ? "\r\n" : childS[i].textContent;
                        else if (childS[i].nodeType == 3)
                            anyString += childS[i].nodeValue;
                    }
                    return anyString;
                });
                HTMLElement.prototype.__defineSetter__("innerText",
                function (sText)
                {
                    this.textContent = sText;
                });
            }
        </script>

        <script src="js/jquery.bxSlider.js" type="text/javascript"></script>

    </head>
    <body>
        <input type="hidden" id="1-libid" name="1-libid"
               value="${currentLib.libid}" />
        <input type="hidden" id="1-familiarity" name="1-familiarity"
               value="${familiarity}" />
        <input type="hidden" id="1-wordid" name="1-wordid"
               value="${currentWord.wordid}" />
        <input type="hidden" id="isManager" name="isManager" value="false">
        <input type="hidden" id="1-spelling" name="1-spelling" value=${currentWord.spelling}>
        <div id="content" class="choose">
            <div class="layout grid-s4m0">
                <div class="col-main">
                    <div class="main-wrap">
                        <div class="med-table">
                            <div class="bookname">
                                <h2>${currentLib.libname}</h2>
                            </div>

                            <table id="J_Words_Table" class="words-table">
                                <tbody>
                                    <tr>
                                        <th class="Jt1 visited <c:if test="${familiarity==7}">cur</c:if>"  onclick=directFamiliarity(${currentLib.libid},7)  style="cursor:pointer">熟悉 </th>
                                        <th class="Jt2 <c:if test="${familiarity==6}">cur</c:if>" onclick=directFamiliarity(${currentLib.libid},6) style="cursor:pointer">第15天</th>
                                        <th class="Jt3 <c:if test="${familiarity==5}">cur</c:if>" onclick=directFamiliarity(${currentLib.libid},5) style="cursor:pointer">第7天</th>
                                        <th class="Jt4 <c:if test="${familiarity==4}">cur</c:if>" onclick=directFamiliarity(${currentLib.libid},4) style="cursor:pointer">第4天</th>
                                        <th class="Jt5 <c:if test="${familiarity==3}">cur</c:if>" onclick=directFamiliarity(${currentLib.libid},3) style="cursor:pointer">第2天</th>
                                        <th class="Jt6 <c:if test="${familiarity==2}">cur</c:if>" onclick=directFamiliarity(${currentLib.libid},2) style="cursor:pointer">第1天</th>
                                        <th class="Jt7 <c:if test="${familiarity==1}">cur</c:if>" onclick=directFamiliarity(${currentLib.libid},1) style="cursor:pointer">生词</th>

                                    </tr>
                                    <tr>
                                        <td class="Jt1 r visited <c:if test="${familiarity==7}">cur</c:if>" onclick=directFamiliarity(${currentLib.libid},7) style="cursor:pointer"> <span id="7_1"  >${numberMap["known_u"]}  </span></td>
                                        <td class="Jt2 b d15 <c:if test="${familiarity==6}">cur</c:if>" onclick=directFamiliarity(${currentLib.libid},6) style="cursor:pointer"> <span id="6_1" >${numberMap["level5_u"]}</span></td>
                                        <td class="Jt3 b d7 <c:if test="${familiarity==5}">cur</c:if>" onclick=directFamiliarity(${currentLib.libid},5) style="cursor:pointer"> <span id="5_1">${numberMap["level4_u"]}</span></td>
                                        <td class="Jt4 b d4 <c:if test="${familiarity==4}">cur</c:if>" onclick=directFamiliarity(${currentLib.libid},4) style="cursor:pointer"> <span id="4_1">${numberMap["level3_u"]}</span></td>
                                        <td class="Jt5 d2 <c:if test="${familiarity==3}">cur</c:if>" onclick=directFamiliarity(${currentLib.libid},3) style="cursor:pointer"> <span id="3_1">${numberMap["level2_u"]}</span></td>
                                        <td class="Jt6 b d1 <c:if test="${familiarity==2}">cur</c:if>" onclick=directFamiliarity(${currentLib.libid},2) style="cursor:pointer"> <span id="2_1">${numberMap["level1_u"]}</span></td>
                                        <td class="Jt7 b un <c:if test="${familiarity==1}">cur</c:if>" onclick=directFamiliarity(${currentLib.libid},1) style="cursor:pointer"> <em><span id="1_1">${numberMap["unknown_u"]}</span></em>
                                        </td>

                                    </tr>
                                    <tr>
                                        <td  style="cursor:pointer" class="Jt1 r visited <c:if test="${familiarity==7}">cur</c:if>"  onclick=directFamiliarity(${currentLib.libid},7) > <span id="7_0"> ${numberMap["known_d"]} </span></td>
                                        <td  style="cursor:pointer" class="Jt2 b d15 <c:if test="${familiarity==6}">cur</c:if>" onclick=directFamiliarity(${currentLib.libid},6)> <span id="6_0">${numberMap["level5_d"]}</span></td>
                                        <td  style="cursor:pointer" class="Jt3 b d7 <c:if test="${familiarity==5}">cur</c:if>" onclick=directFamiliarity(${currentLib.libid},5) > <span id="5_0">${numberMap["level4_d"]}</span></td>
                                        <td style="cursor:pointer" class="Jt4 b d4 <c:if test="${familiarity==4}">cur</c:if>"   onclick=directFamiliarity(${currentLib.libid},4)> <span id="4_0"  >${numberMap["level3_d"]}</span></td>
                                        <td  style="cursor:pointer" class="Jt5 d2 <c:if test="${familiarity==3}">cur</c:if>" onclick=directFamiliarity(${currentLib.libid},3)>  <span id="3_0"  >${numberMap["level2_d"]}</span></td>
                                        <td  style="cursor:pointer" class="Jt6 b d1 <c:if test="${familiarity==2}">cur</c:if>" onclick=directFamiliarity(${currentLib.libid},2) > <span id="2_0" >${numberMap["level1_d"]}</span></td>
                                        <td style="cursor:pointer" class="Jt7 b un <c:if test="${familiarity==1}">cur</c:if>"  onclick=directFamiliarity(${currentLib.libid},1) ><em> <span id="1_0" >${numberMap["unknown_d"]}</span></em>
                                        </td>

                                    </tr>
                                </tbody>
                            </table>
                            <div id="J_Carousel" class="words-box">

                                <div class="word-slide ks-clear">
                                    <a class="" id="word-left" href="#">向左移</a> <a
                                        class="" id="word-right" href="#">向右移</a>
                                    <a class="" id="word-up" href="#">上一个单词</a> <a
                                        class="" id="word-down" href="#">下一个单词</a>


                                </div>

                                <div id="slider2">
                                    <div class="words-slide" id="slideA2">
                                        <div class="words-panels ks-clear">
                                            <div class="words-detail" style="display: block;">
                                                <div class="word-title">
                                                    <p class="word-self">
                                                        <strong class="spell">${currentWord.spelling}</strong> <span
                                                            class="phonogram">${currentWord.phonetics}</span> <a
                                                            class="pronounce" href="#" title="circle"
                                                            onclick=startwav("<%   
                                                                     String spelling= ((SysLibWordsEntity) request.getAttribute("currentWord")).getSpelling();
                                                                     if(spelling==null){
                                                                     spelling=";";
                                                                     }
                                                                     out.print(URLEncoder.encode(spelling, "UTF-8"));
                                                                     
                                                            
                                                            %>")><img
                                                                src="images/pronounce.png" /> </a>
                                                    </p>

                                                </div>
                                                <div class="word-explain">
                                                    <div class="cat-bar">
                                                        <span class="bar-title"><strong>基本释义</strong> </span>
                                                    </div>
                                                    <div class="basic-meaning">
                                                        <p>${currentWord.meaning}</p>
                                                    </div>
                                                    <div class="cat-bar">
                                                        <span class="bar-title"><strong>例&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;句</strong>
                                                        </span>
                                                    </div>
                                                    <div class="model-sentence">
                                                        <%
                                                            List<String> sens = ((SysLibWordsEntity) request.getAttribute("currentWord")).getSens();
                                                            if (sens == null || sens.size() == 0) {

                                                        %>

                                                        <p class="model-en">

                                                            <a class="voice" ><img src="images/voice.png" /> </a>
                                                        </p>

                                                        <p class="model-ch">

                                                        </p>

                                                        <%                                                                                                             }
                                                            for (int i = 0; i < sens.size(); i++) {

                                                                String s[] = sens.get(i).split("#");
                                                                if (s.length == 2) {
                                                        %>
                                                        <p class="model-en">
                                                            <%
                                                                out.print((i + 1) + ". " + s[0]);
                                                            %>

                                                            <a class="voice" href="#" onclick=liju("<%=URLEncoder.encode(s[0].replaceAll("<span class=\"b\">", "").replaceAll("</span>", ""), "utf-8")%>")><img
                                                                    src="images/voice.png" /> </a>
                                                        </p>

                                                        <p class="model-ch">
                                                            <%
                                                                out.print(s[1]);
                                                            %>
                                                        </p>
                                                        <%
                                                                }
                                                            }
                                                        %>
                                                    </div>
                                                    <div class="cat-bar">

                                                        <span class="bar-title"><strong>词&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;性</strong>
                                                        </span>
                                                        <span>
                                                    </div>
                                                    <div class="model-sentence">
                                                        <p class="model-ch">
                                                            ${currentWord.partSpeechs}

                                                        </p>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 切换的部分 -->
                                    <div id="slideB2" class="words-slide"></div>
                                </div>


                                <div id="slider1">
                                    <div class="words-slide" id="sliderA1">
                                        <div class="words-panels ks-clear">
                                            <div class="words-detail" style="display: block;">
                                                <div class="word-title">
                                                    <p class="word-self">
                                                        <strong class="spell">${currentWord.spelling}</strong> <span
                                                            class="phonogram">${currentWord.phonetics}</span> <a
                                                            class="pronounce" href="#" title="circle"
                                                             onclick=startwav("<%=URLEncoder.encode(spelling, "UTF-8")   
                                                            %>")><img
                                                                src="images/pronounce.png" /> </a>
                                                    </p>

                                                </div>
                                                <div class="word-explain">
                                                    <div class="cat-bar">
                                                        <span class="bar-title"><strong>基本释义</strong> </span>
                                                    </div>
                                                    <div class="basic-meaning">
                                                        <p>${currentWord.meaning}</p>
                                                    </div>
                                                    <div class="cat-bar">
                                                        <span class="bar-title"><strong>例&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;句</strong>
                                                        </span>
                                                    </div>
                                                    <div class="model-sentence">

                                                    </div>
                                                    <div class="cat-bar">

                                                        <span class="bar-title"><strong>词&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;性</strong>
                                                        </span>

                                                    </div>
                                                    <div class="model-sentence">


                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 切换的部分 -->
                                    <div id="slideB1" class="words-slide"></div>
                                </div>

                            </div>
                            <!-- 			<div class="congrats">
                                                            <p>
                                                                    <strong>恭喜你，完成本课程！</strong>
                                                            </p>
                                                    </div> -->
                        </div>
                        <script type="text/javascript">
				 
					
					
                            var googleTts="http://translate.google.com/translate_tts?tl=en&q="
					
                            var href ="http://r.5iwords.com/wav/";
					
                            function play(url){
                                var emb=document.createElement('embed');
                                emb.src = url;
                                emb.style.width="0";
                                emb.style.height="0";
                                emb.id = "player";
                                document.body.insertAdjacentElement('afterBegin',emb);
                            }
					
                            function liju(juzi){
                                play(googleTts+decodeURIComponent(juzi));
                            }
                             function startwav(spelling)
                            {
                                 spelling= decodeURIComponent(spelling);
                              
                                var url=href +spelling.substring(0,1).toLocaleLowerCase () + "/" + spelling.toLocaleLowerCase() +".wav";
                                play(url);
                            }
					 
					 
                        </script>

                    </div>
                </div>

                <div class="col-sub">
                    <div class="s-box s-box-weak groupbox">
                        <div class="s-box-hd">
                            <h3 class="s-box-title">我要背单词</h3>
                        </div>
                        <div class="s-box-bd">
                            <div class="bd">
                                <ul>
                                    <li><i class="icon mylesson"></i><a
                                            href="sysLib?action=list">我的教材</a></li>
                                    <li><i class="icon review"></i><a href="#">单词复习</a></li>
                                    <li><i class="icon setting"></i><a
                                            href="user?action=getconfig">功能设置</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="footer">
            <div class="layout grid-m">
                <div class="col-main">
                    <div class="rights">© Copyright 2010~2011, All Rights
                        Reverved.Supported By BanRuoLang.</div>
                </div>
            </div>
        </div>

        <input type=hidden name="types" id="types" value="">
        <script type="text/javascript">
            
      
           
            
            function initValue(){
                var isManager=document.getElementById("isManager");
                var id=0;
                if(isManager.value=="false"){
                    if(document.getElementById("1-familiarity")==null){
                        return false;
                    }
                    url=url+"&familiarity="+document.getElementById("1-familiarity").value;
                    url=url+"&libid="+document.getElementById("1-libid").value;
                    url=url+"&wordid="+document.getElementById("1-wordid").value;
                    id=document.getElementById("1-wordid").value;
                    isManager.value="true";
                    level=document.getElementById("1-familiarity").value;
                  
                  
                }else{
                    if(document.getElementById("familiarity")==null){
                        return false;
                    }
                    url=url+"&familiarity="+document.getElementById("familiarity").value;
                    url=url+"&libid="+document.getElementById("libid").value;
                    url=url+"&wordid="+document.getElementById("wordid").value;
                    id=document.getElementById("wordid").value;
                    level=document.getElementById("familiarity").value;
                    
                        
                }
                return true;
            }
            //type 表示是上一个还是下一个,2左移动 3有移动 level表示当前级别
            function initTabNumber(level,type){
                if(level==0){
                    level=1;
                }
                var num;
                if(level=="7"){
                    //上面 下面都要少一个
                    
                    num=document.getElementById("7_0");
                    if(parseInt(num.innerText)<=0){
                        alert("当前维度没有可以背诵的单词,请重新选择一个维度进行背诵!");
                        return;
                    
                    }
                    num.innerText=parseInt(num.innerText)-1;
                      
                    num=document.getElementById("7_1");
                    num.innerText=parseInt(num.innerText)-1;
                     
                   
                    
                }else{
                    num=document.getElementById(level+"_1");
                    if(parseInt(num.innerText)<=0){
                        alert("当前维度没有可以背诵的单词,请重新选择一个维度进行背诵!");
                        return;
                    
                    }
                    num.innerText=parseInt(num.innerText)-1;
                   
                }
                   
                   
               
              
               
                if(level=="7"){
                    //都得少一个
              
                    
                    //左移动
                    if(type=="2"){
                        var num=document.getElementById("1_0");
                        num.innerText=parseInt(num.innerText)+1;
                    }else{
                        var num=document.getElementById("6_0");
                        num.innerText=parseInt(num.innerText)+1;
                    }
                }
                else if(level=="1"){
                    //右移动
                    if(type=="3"){
                       
                        var num=document.getElementById("7_0");
                        num.innerText=parseInt(num.innerText)+1;
                        var num1=document.getElementById("7_1");
                        num1.innerText=parseInt(num1.innerText)+1;
                    }else{
                        //左移动
                     
                        var l=parseInt(level)+1;
                        var ll=l+"_0";
                        var num=document.getElementById(ll);
                        num.innerText=parseInt(num.innerText)+1;
                    }
                }
                else{
                    if(type=="2"){
                        var l=parseInt(level)+1;
                        var ll=l+"_0";
                        var num=document.getElementById(ll);
                        num.innerText=parseInt(num.innerText)+1;
                    }
                    else if(type=="3"){
                        var l=parseInt(level)-1;
                        var ll=l+"_0";
                        var num=document.getElementById(ll);
                        num.innerText=parseInt(num.innerText)+1;
                    }
                }
		
            }
	
	
            var url="ajaxLearning?action=next";
            var currentSlideObjOne = {};
            var currentSlideObjTwo ={};
            var currentDirection = "UP"; //当前方向 UP || DOWN
            var lOrRDirection="";
            var level="";
            $(document).ready(function(){

                var slider = $('#slider1').bxSlider({

                    controls: false,

                    mode:'vertical',

                    onBeforeSlide: function(currentSlide, totalSlides,currentSlideObj){
				
                        currentSlideObjOne = currentSlideObj;
                        currentSlideObjOne.html("");
                        loadWord();
                    },

                    onAfterSlide: function(currentSlide, totalSlides,currentSlideObj){
                        currentSlideObjOne = currentSlideObj;
                       
                    }

                });
        
                var slider2 = $('#slider2').bxSlider({

                    controls: false,

                    mode:'horizontal',

                    onBeforeSlide: function(currentSlide, totalSlides,currentSlideObj){
				
                        currentSlideObjTwo = currentSlideObj;
                        currentSlideObjTwo.html("");
                        loadWord();
                        
                    },

                    onAfterSlide: function(currentSlide, totalSlides,currentSlideObj){
                        currentSlideObjTwo = currentSlideObj;
                   
                    }

                });
		
                //上移动
                $('#word-up').click(function() {
                    currentDirection = "UP";
        	
                    hidenSlide(true);
                    slider.goToNextSlide();
        	
                    return false;

                });

        
                //下移动
                $('#word-down').click(function() {
                    currentDirection = "DOWN";
                    hidenSlide(true);
                    slider.goToPreviousSlide();
                    //调用ajax 获取数据
			
                    return false;

                });
        
                //左移动
                $('#word-left').click(function() {
                    lOrRDirection = "LEFT";
                    hidenSlide(false);
                    slider2.goToNextSlide();
                    return false;

                });
        
                //右移动
                $('#word-right').click(function() {
                    lOrRDirection = "RIGHT";
                    hidenSlide(false);
                    slider2.goToPreviousSlide();
                    return false;

                });
        
        
                //初始化 隐藏div
                hidenSlide(false);
            });
	
	
            function hidenSlide(isUpAndDown){
                if(isUpAndDown){
                    $("#slider2").parent().hide();
                    $("#slider1").parent().show();
                    $("#slider2").hide();
                    $("#slider1").show();
                }else{
                    $("#slider1").parent().hide();
                    $("#slider2").parent().show();
                    $("#slider1").hide();
                    $("#slider2").show();
                }
            }
    
            //加载word
            function loadWord(params){
                if( !initValue()){
                    return ;
                }
                
                
                if(level==0){
                    level=1;
                }
                var num;
                if(level=="7"){
              
                    
                    num=document.getElementById("7_0");
                    if(parseInt(num.innerText)<=0){
                        alert("当前维度没有可以背诵的单词,请重新选择一个维度进行背诵!");
                        return;
                    
                    }
         
                }else{
                    num=document.getElementById(level+"_1");
                    if(parseInt(num.innerText)<=0){
                        alert("当前维度没有可以背诵的单词,请重新选择一个维度进行背诵!");
                        return;
                    
                    }
                   
                   
                }
                
                
                
                if(currentDirection=="UP"){url=url+"&udtype=0";}
                if(currentDirection=="DOWN"){url=url+"&udtype=1";} 
                if(lOrRDirection=="LEFT"){url=url+"&lrtype=2";}
                if(lOrRDirection=="RIGHT"){url=url+"&lrtype=3";}
                $.ajax({
                    type: "POST",
                    url:url,
                    data: params,
                    cache: false,
                    success: function(ajaxResult){
                        //更新上下  左右2组slide的当前显示DIV的内容
                        currentSlideObjOne.html("").html(ajaxResult);
                        currentSlideObjTwo.html("").html(ajaxResult);     
                        
                       
                        url="ajaxLearning?action=next";
                        if(lOrRDirection=="LEFT"){
                            initTabNumber(level,"2");
                        }
                        if(lOrRDirection=="RIGHT"){
                            initTabNumber(level,"3");
                        }
                        lOrRDirection="";
                        setTimeout(function(){startwav(encodeURIComponent(document.getElementById("spelling").value));}, 3000 );  	
                    },
			
                    clearForm: true
                });
    	
            }
       

            function keyUp(e) {          
                var currKey ;
                var type=2;
                
                
                try
                {
                     
                    currKey=e.which;
                }
                catch(err)
                {
                    type=1;  //IE
                    currKey = window.event.keyCode ;
                }

               
                


                if(currKey==38||currKey==87){
                    if(type==1){
                        document.getElementById("word-up").click();
              
                    }else{
         
                        var ev = document.createEvent('HTMLEvents');
                        ev.initEvent('click', false, true);
                        document.getElementById("word-up").dispatchEvent(ev);
                    }          
                }
                else  if(currKey==40||currKey==83){
                  
                    if(type==1){
                        document.getElementById("word-down").click();
              
                    }else{
         
                        var ev = document.createEvent('HTMLEvents');
                        ev.initEvent('click', false, true);
                        document.getElementById("word-down").dispatchEvent(ev);
                    }     
                   
                }
                else if(currKey==37||currKey==65){
                    if(type==1){
                        document.getElementById("word-left").click();
              
                    }else{
         
                        var ev = document.createEvent('HTMLEvents');
                        ev.initEvent('click', false, true);
                        document.getElementById("word-left").dispatchEvent(ev);
                    }     
                }
                else if(currKey==39||currKey==68){
                    
                    if(type==1){
                        document.getElementById("word-right").click();
              
                    }else{
         
                        var ev = document.createEvent('HTMLEvents');
                        ev.initEvent('click', false, true);
                        document.getElementById("word-right").dispatchEvent(ev);
                    }     
                }
                
            }
                
         
            document.onkeyup = keyUp;  
           
       
                                                                   
           
       
            setTimeout(function(){startwav(encodeURIComponent(document.getElementById("1-spelling").value));}, 3000 );
        </script>



    </body>
    <embed id="player" src="" loop=false autostart=false hidden=true
           height=0 width=0>
</html>